<template>
  <div style="padding: 20px">
    <div @click="goBack" style="text-align: left; margin-bottom: 40px">
      <van-icon name="arrow-left" />
    </div>

    <div style="text-align: center; margin-bottom: 40px">
      <img :src="currentProduct.obj.img" />
    </div>

    <div style="padding: 20px">
      <div
        style="
          margin-bottom: 40px;
          display: flex;
          justify-content: space-between;
        "
      >
        <span>
          {{ currentProduct.obj.name }}
        </span>

        <span @click.stop="collect()">
          <van-icon
            :name="currentProduct.obj.isCollect ? 'like' : 'like-o'"
            :color="currentProduct.obj.isCollect ? 'red' : ''"
          />
        </span>
      </div>

      <div
        style="
          display: flex;
          margin-bottom: 40px;
          justify-content: space-between;
        "
      >
        <div>
          <span
            style="
              padding: 5px 14px;
              border-radius: 10px;
              border: 1px solid #53b175;
              font-size: 16px;
              margin-right: 5px;
            "
            @click="reduceNum()"
            >-</span
          >

          <input
            style="
              width: 20px;
              padding: 5px 14px;
              border-radius: 10px;
              border: none;
              outline: none;
              font-size: 16px;
            "
            type="text"
            inputmode="decimal"
            v-model="currentProduct.obj.num"
          />

          <span
            @click="addNum()"
            style="
              padding: 5px 14px;
              border-radius: 10px;
              background: #53b175;
              color: #fff;
              font-size: 16px;
            "
            >+</span
          >
        </div>
        <div>
          <span
            >{{ currentProduct.obj.totalPrice
            }}{{ currentProduct.obj.unit }}</span
          >
        </div>
      </div>
    </div>

    <van-collapse v-model="activeNames" style="margin-bottom: 120px">
      <van-collapse-item title="产品详情" name="1">
        {{ currentProduct.obj.details }}
      </van-collapse-item>
      <van-collapse-item title="产地" name="2">
        {{ currentProduct.obj.location }}
      </van-collapse-item>
      <van-collapse-item title="评分" name="3">
        <van-rate v-model="currentProduct.obj.star" allow-half />
      </van-collapse-item>
    </van-collapse>

    <div class="my-button">
      <div style="padding: 10px 20px" @click="addCart">
        <span> 添加到购物车</span>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted } from "vue";
import { useRouter } from "vue-router";
import { showDialog } from "vant";
import { userStore } from "../store/piniaStore";
import { myMixin } from "./../mixin.js";
const { errorMsgBox, successMsgBox } = myMixin();
const useUserStore = userStore();
let cartList = useUserStore.cartList;
let products = useUserStore.products;

const router = useRouter();

let collectList = useUserStore.collectList;

let activeNames = ref(["1"]);

let currentProduct = reactive({ obj: {} });
onMounted(() => {
  currentProduct.obj =
    products[window.localStorage.getItem("currentProductIndex")];
});
function addNum() {
  currentProduct.obj.num += 1;
  currentProduct.obj.totalPrice =
    currentProduct.obj.num * currentProduct.obj.price;
}
function reduceNum() {
  if (currentProduct.obj.num > 0) {
    currentProduct.obj.num -= 1;
    currentProduct.obj.totalPrice =
      currentProduct.obj.num * currentProduct.obj.price;
  }
}
function goBack() {
  router.push(window.localStorage.getItem("lastPage"));
}
function collect() {
  if (currentProduct.obj.isCollect) {
    let index1;
    let isExist = collectList.some((collectProduct, index) => {
      index1 = index;
      return collectProduct.id == currentProduct.obj.id;
    });
    if (isExist) {
      collectList.splice(index1, 1);
    }
    currentProduct.obj.isCollect = false;
    successMsgBox("取消成功");
  } else {
    let isExist = collectList.some((collectProduct) => {
      return collectProduct.id == currentProduct.obj.id;
    });
    if (!isExist) {
      collectList.push(currentProduct.obj);
    }
    currentProduct.obj.isCollect = true;
    successMsgBox("收藏成功");
  }
}
function addCart() {
  let isExist = cartList.some((cartProduct) => {
    if (cartProduct.id == currentProduct.obj.id) {
      cartProduct.num += currentProduct.obj.num;
      cartProduct.totalPrice = cartProduct.num * cartProduct.price;
      return true;
    }
  });
  if (!isExist) {
    cartList.push(currentProduct.obj);
  }
  useUserStore.calcluteCart();
  successMsgBox("添加成功");
}



</script>
